@using AntDesign.Charts
@using Title = AntDesign.Charts.Title

<Tabs>
    <TabPane Key="1">
        <Tab>示例1</Tab>
        <ChildContent>
            <Rose Data="data1" Config="config1" />
        </ChildContent>
    </TabPane>

    <TabPane Key="2">
        <Tab>示例2</Tab>
        <ChildContent>
            <Rose Data="data2" Config="config2"  OtherConfig="otherConfig2" />
        </ChildContent>
    </TabPane>

    <TabPane Key="3">
        <Tab>示例3</Tab>
        <ChildContent>
            <Rose Data="data3" Config="config3"   OtherConfig="otherConfig3" />
        </ChildContent>
    </TabPane>
</Tabs>

@code{

    #region 示例1

    readonly object[] data1 =
    {
        new
        {
            type = "分类一",
            value = 27
        },
        new
        {
            type = "分类二",
            value = 25
        },
        new
        {
            type = "分类三",
            value = 18
        },
        new
        {
            type = "分类四",
            value = 15
        },
        new
        {
            type = "分类五",
            value = 10
        },
        new
        {
            type = "其它",
            value = 5
        }
    };

    readonly RoseConfig config1 = new RoseConfig
    {
        ForceFit = true,
        Title = new Title
        {
            Visible = true,
            Text = "多色玫瑰图"
        },
        Description = new Description
        {
            Visible = true,
            Text =
                "指定颜色映射字段(colorField)，饼图切片将根据该字段数据显示为不同的颜色。指定颜色需要将color配置为一个数组。\n当把饼图label的类型设置为inner时，标签会显示在切片内部。设置offset控制标签的偏移值。"
        },
        Radius = 0.8,
        RadiusField = "value",
        CategoryField = "type",
        ColorField = "type",
        Label = new RoseLabel
        {
            Visible = true,
            Type = "outer"
            @*content= (text) => text.value,*@
        }
    };

    #endregion 示例1


    #region 示例2

    readonly object[] data2 =
    {
          new {
            type =  "分类一",
            value =  27,
            user =  "用户一",
          },
          new {
            type =  "分类二",
            value =  25,
            user =  "用户一",
          },
          new {
            type =  "分类三",
            value =  18,
            user =  "用户一",
          },
          new {
            type =  "分类四",
            value =  15,
            user =  "用户一",
          },
          new {
            type =  "分类五",
            value =  10,
            user =  "用户一",
          },
          new {
            type =  "其它",
            value =  5,
            user =  "用户一",
          },
          new {
            type =  "分类一",
            value =  7,
            user =  "用户二",
          },
          new {
            type =  "分类二",
            value =  5,
            user =  "用户二",
          },
          new {
            type =  "分类三",
            value =  38,
            user =  "用户二",
          },
          new {
            type =  "分类四",
            value =  5,
            user =  "用户二",
          },
          new {
            type =  "分类五",
            value =  20,
            user =  "用户二",
          },
          new {
            type =  "其它",
            value =  15,
            user =  "用户二",
          },
    };

    readonly RoseConfig config2 = new RoseConfig
    {
        ForceFit = true,
        Title = new Title
        {
            Visible = true,
            Text = "堆叠玫瑰图"
        },
        Description = new Description
        {
            Visible = true,
            Text =
                "指定颜色映射字段(colorField)，饼图切片将根据该字段数据显示为不同的颜色。指定颜色需要将color配置为一个数组。\n当把饼图label的类型设置为inner时，标签会显示在切片内部。设置offset控制标签的偏移值。"
        },
        Radius = 0.8,
        RadiusField = "value",
        CategoryField = "type",     
        Label = new RoseLabel
        {
            Visible = true,
            Type = "inner"
            @*content= (text) => text.value,*@
        }
    };

    object otherConfig2 = new
    {
        stackField = "user",
    };

    #endregion 示例2

    #region 示例3

    readonly object[] data3 =
    {
          new {
            type =  "分类一",
            value =  27,
            user =  "用户一",
          },
          new {
            type =  "分类二",
            value =  25,
            user =  "用户一",
          },
          new {
            type =  "分类三",
            value =  18,
            user =  "用户一",
          },
          new {
            type =  "分类四",
            value =  25,
            user =  "用户一",
          },
          new {
            type =  "分类五",
            value =  10,
            user =  "用户一",
          },
          new {
            type =  "其它",
            value =  12,
            user =  "用户一",
          },
          new {
            type =  "分类一",
            value =  17,
            user =  "用户二",
          },
          new {
            type =  "分类二",
            value =  35,
            user =  "用户二",
          },
          new {
            type =  "分类三",
            value =  28,
            user =  "用户二",
          },
          new {
            type =  "分类四",
            value =  35,
            user =  "用户二",
          },
          new {
            type =  "分类五",
            value =  20,
            user =  "用户二",
          },
          new {
            type =  "其它",
            value =  15,
            user =  "用户二",
          },
    };

    readonly RoseConfig config3 = new RoseConfig
    {
        ForceFit = true,
        Title = new Title
        {
            Visible = true,
            Text = "分组玫瑰图"
        },
        Description = new Description
        {
            Visible = true,
            Text =
                "指定颜色映射字段(colorField)，饼图切片将根据该字段数据显示为不同的颜色。指定颜色需要将color配置为一个数组。\n当把饼图label的类型设置为inner时，标签会显示在切片内部。设置offset控制标签的偏移值。"
        },
        Radius = 0.7,
        RadiusField = "value",
        CategoryField = "type",
        Label = new RoseLabel
        {
            Visible = true,
            Type = "inner"
        },
        Theme = new
        {
            legend = new
            {
                margin = new int[] { 0, 0, 80, 0 }
            }
        }
    };

    object otherConfig3 = new
    {
        groupField = "user",
    };

    #endregion 示例3

}